<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>2048小游戏</title>
    <link rel="stylesheet" href="./style/index.css" />
  </head>
  <body>
    <div class="container">
      <nav>
        <h1>2048</h1>
        <div class="score">
          <div class="now">
            <span class="label">SCORE</span>
            <span class="value">0</span>
          </div>
          <div class="best">
            <span class="label">BEST</span>
            <span class="value">0</span>
          </div>
        </div>
      </nav>
      <div class="desc">
        <p>
          <strong>Play 2048 Game online</strong>Join the numbers and get to the
          <strong>2048 tile!</strong>
        </p>
        <button>New Game</button>
      </div>
      <main>
        <div class="game-grid">
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
        </div>
        <div class="tile-container">
          <!-- <div class="tile tile-2 tile-position-1-1">
            <div class="tile-inner">2</div>
          </div>
          <div class="tile tile-4 tile-position-1-2">
            <div class="tile-inner">4</div>
          </div>
          <div class="tile tile-8 tile-position-1-3">
            <div class="tile-inner">8</div>
          </div>
          <div class="tile tile-16 tile-position-1-4">
            <div class="tile-inner">16</div>
          </div>
          <div class="tile tile-32 tile-position-2-1">
            <div class="tile-inner">32</div>
          </div>
          <div class="tile tile-64 tile-position-2-2">
            <div class="tile-inner">64</div>
          </div>
          <div class="tile tile-128 tile-position-2-3">
            <div class="tile-inner">128</div>
          </div>
          <div class="tile tile-256 tile-position-2-4">
            <div class="tile-inner">256</div>
          </div>
          <div class="tile tile-512 tile-position-3-1">
            <div class="tile-inner">512</div>
          </div>
          <div class="tile tile-1024 tile-position-3-2">
            <div class="tile-inner">1024</div>
          </div>
          <div class="tile tile-2048 tile-position-3-3">
            <div class="tile-inner">2048</div>
          </div> -->
        </div>
      </main>
      <div class="mask status">
        <div class="content">Game Over!</div>
        <button>Try again</button>
      </div>
    </div>
    <script src="./scripts/tile.js"></script>
    <script src="./scripts/grid.js"></script>
    <script src="./scripts/render.js"></script>
    <script src="./scripts/listener.js"></script>
    <script src="./scripts/storage.js"></script>
    <script src="./scripts/manager.js"></script>
    <script src="./scripts/index.js"></script>
  </body>
</html>
